@import "~asset/stylesheet/common.less";

.container {
  height: calc(100% - 70px);
}
.load-tab-pane {
  :global {
    .ant-spin-container::after {
      background-color: transparent;
    }
  }
}
.modal-content-wrap {
  position: relative;
  width: 100%;
}
.down-period-title,
.electric-voltage-title {
  margin-left: 40px;
  width: 204px;
  height: 42px;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  padding: 1px;
  .text {
    line-height: 42px;
    color: #00e4ff;
    background-color: rgba(0, 186, 255, 0.2);
    width: 100%;
    display: block;
  }
  .bg();
}
.tabs {
  padding: 0 20px;
  :global {
    .ant-tabs-bar {
      margin: 0 0 30px 0;
      border-color: #00e4ff;
    }

    .ant-tabs-nav .ant-tabs-tab-active {
      color: #00e4ff;
    }
    .ant-tabs-tab {
      color: #fff;
    }
    .ant-tabs-ink-bar {
      background-color: #00e4ff;
    }
    .ant-tabs {
      color: #fff;
    }
  }
}
.bg() {
  .one {
    width: 16px;
    height: 8px;
    border: none;
    border-left: 1px solid #00beff;
    border-top: 1px solid #00beff;
    position: absolute;
    left: 0;
    top: 0;
  }
  .two {
    width: 16px;
    height: 8px;
    border: none;
    border-right: 1px solid #00beff;
    border-top: 1px solid #00beff;
    position: absolute;
    right: 0;
    top: 0;
  }
  .three {
    width: 16px;
    height: 8px;
    border: none;
    border-left: 1px solid #00beff;
    border-bottom: 1px solid #00beff;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .four {
    width: 16px;
    height: 8px;
    border: none;
    border-right: 1px solid #00beff;
    border-bottom: 1px solid #00beff;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.confirm-wrap {
  width: 104px;
  height: 32px;
  line-height: 32px;
  margin-left: 20px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 1px;
  .confirm-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 32px;
    text-align: center;
    background-color: rgba(0, 186, 255, 0.2);
    .text {
      display: block;
      font-size: 16px;
      color: #02db72;
      width: 100%;
      background: none;
      border: none;
    }
    .bg();
  }
}
.switch {
  width: 50px;
  &:global(.ant-switch) {
    background-color: rgba(37, 193, 254, 0.3);
    border: 1px solid rgba(37, 193, 254, 0.3);
  }
  &:global(.ant-switch-checked) {
    background-color: #09ee80;
    border: 1px solid rgba(37, 193, 254, 0.3);
  }
  // &:last-child {
  //   margin-left: 72px;
  // }
}
.electricity-wrap {
  position: absolute;
  left: 968px;
  top: 40px;
  .electricity,
  .access-electricity {
    padding: 0 28px;
    color: #00e4ff;
    font-size: 16px;
  }
}
.switch-wrap {
  padding-top: 3px;
  height: 32px;
}
.down-period-item,
.electric-voltage-item {
  margin-bottom: 30px;
  .item-start-time-wrap,
  .item-end-time-wrap {
    width: 204px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 1px;
    .item-end-time-bg,
    .item-start-time-bg {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 186, 255, 0.2);
      width: 100%;
      height: 100%;
      .bg();
    }
  }
  .item-start-time,
  .item-end-time {
    width: 204px;
    line-height: 32px;
    font-size: 16px;

    .colon {
      text-align: center;
      color: #00e4ff;
      line-height: 28px;
    }
    .hours,
    .minute {
      :global {
        .ant-input-number {
          width: 100%;
          border: 1px solid transparent;
          background-color: transparent;
          &:focus {
            box-shadow: none;
          }
        }
        .ant-input-number-input {
          text-align: right;
          padding: 0;
          font-size: 16px;
          color: #00e4ff;
        }
        .ant-input-number-handler-wrap {
          display: none;
        }
      }
    }
    .minute {
      :global {
        .ant-input-number-input {
          text-align: left;
        }
      }
    }
  }
  .to {
    line-height: 32px;
    padding: 0 26px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    color: #00e4ff;
  }
  .item-title {
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    padding: 0 26px;
    line-height: 32px;
    min-width: 202px;
    text-align: right;
    color: #fff;
  }
}
.electric-voltage-item {
  .to {
    color: #fff;
  }
  .item-start-time,
  .item-end-time {
    .hours,
    .minute {
      :global {
        .ant-input-number-input {
          text-align: center;
        }
      }
    }
  }
}

.interval-operation {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  width: 120px;
  height: 34px;
  position: relative;
  :global {
    .ant-select {
      width: 100%;
      height: 100%;
      .ant-select-selection--single {
        height: 100%;
      }
      .ant-select-selection {
        .ant-select-selection__rendered {
          line-height: 32px;
          height: 100%;
        }
        .ant-select-arrow {
          font-size: 13px;
          color: #00e4ff;
        }
        background-color: #090a34;
        border-color: #5368f1;
        border-radius: 4px;
        color: #fff;
        padding-left: 16px;
      }
    }
  }
}
